M

MLOG

Português

Guia completo de CSS Scroll Timelines, a nova técnica que vincula animações à rolagem. Crie experiências de usuário interativas e envolventes.

Linha do Tempo de Rolagem CSS: Animando com Base na Posição de Rolagem

As animações orientadas pela rolagem estão a revolucionar o web design, oferecendo experiências de usuário envolventes e interativas que vão além dos layouts estáticos tradicionais. As Linhas do Tempo de Rolagem CSS (CSS Scroll Timelines) fornecem uma solução nativa do navegador para criar essas animações, vinculando diretamente o progresso da animação à posição de rolagem de um elemento. Isso abre um mundo de possibilidades criativas para melhorar o engajamento do usuário e a narrativa na web.

O que são as Linhas do Tempo de Rolagem CSS?

As Linhas do Tempo de Rolagem CSS permitem que você controle o progresso de uma animação ou transição CSS com base na posição de rolagem de um contêiner de rolagem especificado. Em vez de depender de animações tradicionais baseadas no tempo, onde a duração da animação é fixa, o progresso da animação está diretamente ligado ao quanto um usuário rolou a página. Isso significa que a animação irá pausar, reproduzir, retroceder ou avançar rapidamente em resposta direta ao comportamento de rolagem do usuário, criando uma experiência mais natural e interativa. Imagine uma barra de progresso que preenche à medida que você rola uma página para baixo, ou elementos que aparecem e desaparecem gradualmente ao entrarem na viewport – esses são os tipos de efeitos que são facilmente alcançáveis com as Linhas do Tempo de Rolagem CSS.

Por que Usar as Linhas do Tempo de Rolagem CSS?

Conceitos e Propriedades Chave

Entender os conceitos centrais e as propriedades CSS é crucial para utilizar eficazmente as Linhas do Tempo de Rolagem:

1. Linha do Tempo de Rolagem (Scroll Timeline)

A propriedade scroll-timeline define o contêiner de rolagem a ser usado como a linha do tempo para a animação. Você pode especificar uma linha do tempo nomeada (ex: --my-scroll-timeline) ou usar valores predefinidos como auto (o contêiner de rolagem ancestral mais próximo), none (sem linha do tempo de rolagem), ou root (a viewport do documento).

/* Define uma linha do tempo de rolagem nomeada */
.scroll-container {
  scroll-timeline: --my-scroll-timeline;
}

/* Usa a linha do tempo nomeada na animação */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

2. Linha do Tempo da Animação (Animation Timeline)

A propriedade animation-timeline atribui uma linha do tempo de rolagem a uma animação. Esta propriedade vincula o progresso da animação à posição de rolagem do contêiner de rolagem especificado. Você também pode usar a função view(), que cria uma linha do tempo com base na intersecção de um elemento com a viewport.

/* Vincula a animação à linha do tempo de rolagem */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

/* Usa view() para animações baseadas na viewport */
.animated-element {
  animation-timeline: view();
}

3. Deslocamentos de Rolagem (Scroll Offsets)

Os deslocamentos de rolagem definem os pontos de início e fim da linha do tempo de rolagem que correspondem ao início e ao fim da animação. Esses deslocamentos permitem que você controle precisamente quando a animação começa e para com base na posição de rolagem. Você pode usar palavras-chave como cover, contain, entry, exit, e valores numéricos (ex: 100px, 50%) para definir esses deslocamentos.

/* Anima quando o elemento está totalmente visível */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: entry 0% cover 100%;
}

/* Inicia a animação a 100px do topo, termina quando a parte inferior está a 200px da parte inferior da viewport */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: 100px exit 200px;
}

4. Eixo da Linha do Tempo de Rolagem (Scroll Timeline Axis)

A propriedade scroll-timeline-axis especifica o eixo ao longo do qual a linha do tempo de rolagem progride. Pode ser definida como block (rolagem vertical), inline (rolagem horizontal), both (ambos os eixos), ou auto (determinado pelo navegador). Ao usar `view()`, é recomendado especificar o eixo explicitamente.

/* Define o eixo da linha do tempo de rolagem */
.scroll-container {
  scroll-timeline-axis: y;
}

/* Com view */
.animated-element {
  scroll-timeline-axis: block;
}

5. Intervalo da Animação (Animation Range)

A propriedade `animation-range` define os deslocamentos de rolagem (pontos de início e fim) que correspondem ao início (0%) e ao fim (100%) da animação. Isso permite mapear posições de rolagem específicas para o progresso da animação.

/* Mapeia todo o intervalo de rolagem para a animação */
.animated-element {
  animation-range: entry 0% cover 100%;
}

/* Inicia a animação na metade do intervalo de rolagem */
.animated-element {
  animation-range: 50% 100%;
}

/* Usa valores em pixels */
.animated-element {
  animation-range: 100px 500px;
}

Exemplos Práticos e Casos de Uso

Vamos explorar alguns exemplos práticos de como usar as Linhas do Tempo de Rolagem CSS para criar animações envolventes:

1. Barra de Progresso

Um caso de uso clássico para animações orientadas pela rolagem é uma barra de progresso que preenche à medida que o usuário rola a página. Isso fornece um feedback visual sobre o quão longe o usuário progrediu no conteúdo.

/* CSS */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 5px;
  background-color: #4CAF50;
  width: 0%;
  animation: fillProgressBar linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 0%;
  animation-fill-mode: forwards;
}

@keyframes fillProgressBar {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <p>... seu conteúdo aqui ...</p>
</div>

Este código cria uma barra de progresso fixa no topo da página. A animação fillProgressBar aumenta gradualmente a largura da barra de progresso de 0% para 100% à medida que o usuário rola a página. O animation-timeline: view() vincula a animação ao progresso de rolagem da viewport, e o `animation-range` liga a rolagem ao progresso visual.

2. Aparecimento Gradual de Imagem (Fade-In)

Você pode usar as Linhas do Tempo de Rolagem para criar um efeito sutil de aparecimento gradual para imagens à medida que elas entram na viewport, melhorando o apelo visual do seu conteúdo.

/* CSS */
.fade-in-image {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HTML */
<img src="image.jpg" class="fade-in-image" alt="Image">

Este código inicialmente esconde a imagem e a posiciona um pouco abaixo de sua posição final. À medida que a imagem rola para a vista, a animação fadeIn aumenta gradualmente a opacidade e move a imagem para sua posição original, criando um efeito suave de aparecimento. O `animation-range` especifica que a animação começa quando a borda superior da imagem está 25% dentro da viewport e termina quando a borda inferior está 75% dentro da viewport.

3. Elementos Fixos (Sticky)

Obtenha efeitos "sticky" – onde elementos se fixam no topo da viewport durante a rolagem – mas com controle e transições aprimoradas. Imagine uma barra de navegação que se transforma suavemente em uma versão condensada à medida que o usuário rola para baixo.

/*CSS*/
.sticky-container {
  height: 200px; /* Ajuste conforme suas necessidades */
  position: relative;
}

.sticky-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  animation: stickyAnimation linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%; /* Ajuste o intervalo conforme necessário */
  animation-fill-mode: both;
  z-index: 10;
}

@keyframes stickyAnimation {
  0% {
    position: absolute;
    top: 0;
  }
  100% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ddd; /* Altere a cor para indicar o estado fixo */
  }
}

/* HTML */
<div class="sticky-container">
  <div class="sticky-element">My Sticky Element</div>
</div>

Neste exemplo, o elemento transita de position: absolute para position: fixed ao entrar nos 20% superiores da viewport, criando um efeito suave de "fixação". Ajuste o animation-range e as propriedades CSS dentro dos keyframes para personalizar o comportamento.

4. Efeito de Rolagem Parallax

Crie um efeito de rolagem parallax onde diferentes camadas de conteúdo se movem em velocidades diferentes à medida que o usuário rola, adicionando profundidade e interesse visual à página.

/* CSS */
.parallax-container {
  position: relative;
  height: 500px; /* Ajuste conforme suas necessidades */
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.parallax-layer--bg {
  background-image: url("background.jpg");
  animation: parallaxBg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

.parallax-layer--fg {
 background-image: url("foreground.png");
  animation: parallaxFg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

@keyframes parallaxBg {
 to {
    transform: translateY(50px); /* Ajuste para a velocidade do parallax */
 }
}

@keyframes parallaxFg {
 to {
   transform: translateY(100px); /* Ajuste para a velocidade do parallax */
 }
}

/* HTML */
<div class="parallax-container">
  <div class="parallax-layer parallax-layer--bg"></div>
  <div class="parallax-layer parallax-layer--fg"></div>
</div>

Este exemplo cria duas camadas com imagens de fundo diferentes. As animações parallaxBg e parallaxFg transladam as camadas em velocidades diferentes, criando o efeito parallax. Ajuste os valores de translateY nos keyframes para controlar a velocidade de cada camada.

5. Animação de Revelação de Texto

Revele o texto caractere por caractere à medida que o usuário rola além de um certo ponto, chamando a atenção e aprimorando o aspecto de narrativa do conteúdo.

/* CSS */
.text-reveal-container {
  position: relative;
  overflow: hidden;
}

.text-reveal {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: textRevealAnimation steps(1) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
  width: 0;
}

@keyframes textRevealAnimation {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="text-reveal-container">
  <span class="text-reveal">Este texto será revelado à medida que você rola.</span>
</div>

Este exemplo utiliza a função de temporização steps(1) para revelar o texto caractere por caractere. O width: 0 inicialmente esconde o texto, e a animação textRevealAnimation aumenta gradualmente a largura para revelar o texto inteiro. Ajuste o animation-range para controlar quando a animação de revelação de texto começa e termina.

Compatibilidade de Navegadores e Polyfills

As Linhas do Tempo de Rolagem CSS são uma tecnologia relativamente nova, e o suporte dos navegadores ainda está em evolução. No final de 2023, os principais navegadores como Chrome e Edge oferecem bom suporte. Firefox e Safari estão a trabalhar ativamente na implementação do recurso. É essencial verificar a compatibilidade atual dos navegadores antes de implementar as Linhas do Tempo de Rolagem em produção. Você pode usar recursos como Can I use para verificar o status do suporte.

Para navegadores que não suportam nativamente as Linhas do Tempo de Rolagem, você pode usar polyfills para fornecer uma funcionalidade semelhante. Um polyfill é um pedaço de código JavaScript que implementa o recurso ausente usando JavaScript. Vários polyfills estão disponíveis para as Linhas do Tempo de Rolagem CSS, permitindo que você use o recurso mesmo em navegadores mais antigos.

Considerações de Acessibilidade

Embora as animações orientadas pela rolagem possam aprimorar a experiência do usuário, é crucial considerar a acessibilidade para garantir que seu site seja utilizável por todos, incluindo usuários com deficiências.

Melhores Práticas e Dicas

Aqui estão algumas melhores práticas e dicas para usar as Linhas do Tempo de Rolagem CSS de forma eficaz:

Considerações Globais para o Design de Animações

Ao projetar animações para um público global, tenha estes pontos em mente:

Conclusão

As Linhas do Tempo de Rolagem CSS oferecem uma maneira poderosa e eficiente de criar animações web envolventes e interativas. Ao vincular o progresso da animação à posição de rolagem, você pode criar experiências mais dinâmicas, responsivas e amigáveis ao usuário. Embora o suporte dos navegadores ainda esteja em evolução, os benefícios de usar as Linhas do Tempo de Rolagem CSS – desempenho aprimorado, uma abordagem declarativa e uma experiência do usuário melhorada – as tornam uma ferramenta valiosa para os desenvolvedores web modernos. Ao experimentar com as Linhas do Tempo de Rolagem, lembre-se de priorizar a acessibilidade e considerar o contexto global do seu público para criar experiências web verdadeiramente inclusivas e envolventes.

Abrace esta nova e empolgante tecnologia e desbloqueie um mundo de possibilidades criativas para seus projetos web. O futuro da animação web está aqui, e é orientado pela rolagem!